<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>支付配置</cite></a>
        <a><cite>支付域名</cite></a>
    </span>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付域名列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <!--<a lay-href="config/pay_domain/create" class="layui-btn" data-type="all" data-events="create"><i class="layui-icon layui-icon-add-1"></i>新增支付域名</a>-->
                        <a class="layui-btn create"><i class="layui-icon layui-icon-add-1"></i>新增支付域名</a>
                        <div class="layui-form" style="float:right; margin-bottom: 10px;">
                            <div class="layui-form-item" style="margin:0;">
                                <div class="layui-input-inline">
                                    <input type="text" name="searchDomainUrl" id="searchDomainUrl" placeholder="域名地址" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <select name="searchDomainStatus" id="searchDomainStatus" lay-search="">
                                        <option value="-99">域名状态</option>
                                        <option value="0">停用</option>
                                        <option value="1">启用</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="searchRiskStatus" id="searchRiskStatus" lay-search="">
                                        <option value="-99">风控状态</option>
                                        <option value="0">未风控</option>
                                        <option value="1">已风控</option>
                                    </select>
                                </div>
                                <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="layui-hide center" lay-filter="XxPay_Mgr_Merchant_PayDomain" id="XxPay_Mgr_Merchant_PayDomain"></table>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table','util', 'form', 'admin'], function(){
        var table = layui.table
            ,$ = layui.$
            ,form = layui.form
            ,view = layui.view
            ,admin = layui.admin
            ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        //标题内容模板
        var tplTitle = function(d){
            return "<a class='layui-btn layui-btn-xs edit' lay-event='edit'><i class='layui-icon layui-icon-edit'></i>编辑</a>" +
                "<a class='layui-btn layui-btn-xs layui-btn-normal' lay-event='debug'><i class='layui-icon layui-icon-release'></i>调试</a>";
        };

        var tplDomainStatus = function(d){
            var checkedHtml = " id='"+d.id+"' ";
            if(d.domainStatus == 1) {
                checkedHtml += " checked";
            }
            return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
        };

        var tplRiskStatus = function(d){
            if(d.riskStatus == 0) {
                return "<span style='color: green'>未风控</span>";
            }else if(d.riskStatus == 1) {
                return "<span style='color: red'>已风控</span>";
            }
        };

        var tplDomainType = function(d){
            if(d.domainType == 1) {
                return "<span style='color: green'>仅打开支付宝</span>";
            }else if(d.domainType == 2) {
                return "<span style='color: blue'>仅获取用户ID</span>";
            }else if(d.domainType == 3) {
                return "<span style='color: orange'>都支持</span>";
            }
        };

        table.render({
            elem: '#XxPay_Mgr_Merchant_PayDomain'
            ,url: layui.setter.baseUrl + '/config/pay_domain/list'
            ,where: { access_token: layui.data(layui.setter.tableName).access_token}
            ,id: 'tableReload'
            ,cols: [[
                {field:'id', title: '域名ID'}
                ,{field:'domainUrl', title: '域名地址'}
                ,{field:'domainType',  title: '域名类型',templet: tplDomainType }
                ,{field:'riskStatus',  title: '风控状态',templet: tplRiskStatus }
                ,{field:'domainStatus', title: '域名状态',templet: tplDomainStatus }
                ,{field: 'createTime', width: 200, title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
                ,{field:'edite', width: 200, fixed:'right',title: '操作', templet: tplTitle }
            ]]
            ,page: true
            ,skin: 'line'
        });


        //监听工具条
        table.on('tool(XxPay_Mgr_Merchant_PayDomain)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                view.xxpayPopup("编辑域名", "config/pay_domain/update", {id: data.id}, {area:["60%", "60%"]});
            }else if(obj.event === 'debug'){
                var domainType = data.domainType;
                var debugGetAlipayUserIdCodeUrl = data.debugGetAlipayUserIdCodeUrl;
                var debugOpenAlipayCodeUrl = data.debugOpenAlipayCodeUrl;
                var codeImgUrl = debugGetAlipayUserIdCodeUrl;
                if(domainType == 1) codeImgUrl = debugOpenAlipayCodeUrl;
                layer.open({
                    title: "使用支付宝APP扫码调试",
                    type: 1,
                    anim: 0,
                    content: "<img style='padding:20px' src='" +  codeImgUrl + "' /><div style='text-align: center; color: red; padding-bottom: 20px;'>能获取到支付宝用户ID表示配置成功</div>"
                });

            }

        });

        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var domainUrl = $("#searchDomainUrl").val();
                var riskStatus = $("#searchRiskStatus").val();
                var domainStatus = $("#searchDomainStatus").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        domainUrl : domainUrl,
                        riskStatus : riskStatus,
                        domainStatus : domainStatus
                    }
                });
            }
        };

        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.create').click(function(){
            view.xxpayPopup("新增域名", "config/pay_domain/create", {area:['60%','60%']});
        });

        $('.edit').click(function(){
            view.xxpayPopup("编辑域名", "config/pay_domain/update", {id: data.id}, {area:['60%','60%']});
        });

        form.on('switch(statusSwitch)', function(data){

            var id = $(data.elem).attr('id');
            var updateState = data.elem.checked ? "1" : "0";
            var loadingIndex = layer.load();
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/config/pay_domain/update',
                data: {id: id, domainStatus: updateState},
                success: function(res){
                    if(res.code == 0) {
                        table.reload('tableReload');
                    }
                },
                complete:function(){
                    layer.close(loadingIndex);
                }
            });
        });

        // 渲染表单
        form.render();

    });
    
</script>
